<template>
  <view class="container">
    <view class="title">
      HI！欢迎来到第三环节
    </view>
    <view class="robot">
      <image src="/static/image/diagonse_robot.png"></image>
    </view>
    <view class="diagnoseFooter">
      <image src="/static/image/diagnose_footer.png"></image>
    </view>
    <view class="diagnoseYuyin">
      <image src="/static/image/diagnose_maike.png"></image>
    </view>
    <view class="diagnoseRight">
      <image src="/static/image/diagnose_right.png"></image>
    </view>
    <slot></slot>
  </view>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
image {
  width: 100%;
  height: 100%;
}

.container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 33rpx 84rpx;
  position: relative;
  background-image: url("@/static/image/diagnose_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;

  .title {
    font-family: zihun143-zhengkuchaojihei;
    font-weight: bold;
    font-size: 17.55rpx;
    color: #76FFCE;
    letter-spacing: 0;
    text-align: center;
  }

  .robot {
    position: absolute;
    left: 60rpx;
    bottom: 75rpx;
    width: 113.1rpx;
    height: 117.78rpx;
  }
  .diagnoseFooter{
    position: absolute;
    left: 50%;
    bottom: -20rpx;
    transform: translateX(-50%);
    width: 185.55rpx;
    height: 86.93rpx;
  }
  .diagnoseYuyin{
    width: 170.04rpx;
    height: 164.58rpx;
    position: absolute;
    left: 175rpx;
    top:95rpx;

  }
  .diagnoseRight{
    width: 111.54rpx;
    height: 234rpx;
    position: absolute;
    right:10rpx;
    bottom: -20rpx;
  }
}
</style>
